<template>
  <div class="file-indicator-component">
    <el-tooltip
        :content="tooltipContent"
        placement="top-start"
        show-after="500"
        hide-after="0"
    >
      <div
          class="signal-circle"
          :class="signalClass">
        {{ signalText }}
      </div>
    </el-tooltip>
    <div class="pdf-icon">
      <img src="@/assets/images/pdf.svg" alt="pdf" width="32" height="32">
    </div>
    <el-text truncated class="file-name">{{ fileName }}</el-text>
    <div class="close-area">
      <el-button
          class="close-button"
          :icon="CircleCloseFilled"
          circle
          @click="$emit('remove')"
          :class="{ 'visible': showCloseButton }"/>
    </div>
  </div>
</template>

<script setup>
import {computed, ref} from 'vue'
import {CircleCloseFilled} from '@element-plus/icons-vue'

const props = defineProps({
  type: {
    type: String,
    required: true,
    validator: (value) => ['temp', 'all', 'single'].includes(value)
  },
  fileName: {
    type: String,
    required: true
  }
})

const emit = defineEmits(['remove'])

const showCloseButton = ref(false)

const signalClass = computed(() => {
  switch (props.type) {
    case 'temp':
      return 'temp'
    case 'all':
      return 'all'
    case 'single':
      return 'single'
    default:
      return ''
  }
})

const signalText = computed(() => {
  switch (props.type) {
    case 'temp':
      return 'T'
    case 'all':
      return 'A'
    case 'single':
      return 'S'
    default:
      return ''
  }
})

const tooltipContent = computed(() => {
  switch (props.type) {
    case 'temp':
      return '临时文件'
    case 'all':
      return '全部文件'
    case 'single':
      return '单个文件'
    default:
      return ''
  }
})
</script>

<style scoped>
.file-indicator-component {
  display: flex;
  align-items: center;
  width: 160px;
  height: 46px;
  border-radius: 23px 8px 8px 23px;
  background-color: white;
  border: 1.5px solid rgba(60, 160, 190, 0.3);
  box-shadow: 1px 2px rgba(0, 0, 0, 0.1);
  position: relative;
  gap: 5px;
  padding-left: 5px;
}

.signal-circle {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  color: white;
  border: 1px solid black;
}

.signal-circle.temp {
  background-color: blue;
}

.signal-circle.all {
  background-color: red;
}

.signal-circle.single {
  background-color: green;
}

.pdf-icon {
  display: flex;
  align-items: center;
}

.file-name {
  width: 65px;
  min-width: 65px;
  max-width: 65px;
  text-align: left;
  align-self: center;
  font-size: 12px;
  color: black;
}

.close-button {
  opacity: 0;
  transition: opacity 0.2s;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: none;
}

.close-button.visible {
  opacity: 1;
}

.file-indicator-component:hover .close-button {
  opacity: 1;
}
</style>
